<template>
  <div id="test">
    <p @click="toggleShow">keepAlive</p>
    <keep-alive>
        <compontentB v-if="show"></compontentB>
        <compontentA v-else></compontentA>
    </keep-alive>
  </div>
</template>
<script>
import compontentA from "../components/part14/compontentA.vue";
import compontentB from "../components/part14/compontentB.vue";
export default {
  name: "",
  components: {
      compontentA,
      compontentB
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggleShow: function() {
      console.log("lalalal");

      this.show = !this.show;
    }
  },
  beforeCreate:()=>{
    aaaa = '';
    console.log(`beforeCreate里面还没有实例化vue，所以取不到data里面的数据。此时会报错，但是main里面设置的有errorHandler，这个错误会被捕获到`);
    this.show = true;
  }
};
</script>
<style scoped>
</style>